<template>
	<view class="container">
		<view class="header fade-in">
			<text class="title">火锅寻宝</text>
			<text class="subtitle">今日已发现 {{foundCount}}/{{totalCount}} 个宝藏</text>
		</view>
		
		<view class="ar-container">
			<view class="ar-view" v-if="!isScanning">
				<image src="/static/images/games/ar-guide.png" mode="aspectFit" class="ar-guide"></image>
				<text class="scan-tip">将相机对准藏宝点</text>
				<button class="scan-btn" @click="startScan">开始扫描</button>
			</view>
			<view class="scanning-view" v-else>
				<view class="scan-frame"></view>
				<view class="scan-line"></view>
				<text class="scanning-tip">正在扫描中...</text>
			</view>
		</view>
		
		<view class="treasure-list fade-in">
			<text class="section-title">今日宝藏</text>
			<view class="treasure-grid">
				<view class="treasure-item" v-for="(treasure, index) in treasures" :key="index"
					:class="{ 'found': treasure.found }">
					<image :src="treasure.icon" mode="aspectFit" class="treasure-icon"></image>
					<text class="treasure-name">{{treasure.name}}</text>
					<text class="treasure-reward">{{treasure.reward}}</text>
					<view class="treasure-status" v-if="treasure.found">
						<text class="status-text">已发现</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="nearby-stores fade-in">
			<text class="section-title">附近藏宝点</text>
			<view class="store-list">
				<view class="store-item" v-for="(store, index) in nearbyStores" :key="index"
					@click="navigateToStore(store)">
					<image :src="store.image" mode="aspectFill" class="store-image"></image>
					<view class="store-info">
						<text class="store-name">{{store.name}}</text>
						<text class="store-address">{{store.address}}</text>
						<text class="store-distance">{{store.distance}}km</text>
					</view>
					<view class="store-treasures">
						<text class="treasure-count">{{store.treasureCount}}个宝藏</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="rules fade-in">
			<text class="rules-title">活动规则</text>
			<view class="rules-content">
				<text>1. 每日可发现3个宝藏</text>
				<text>2. 到店扫描可获得额外奖励</text>
				<text>3. 宝藏位置每日更新</text>
				<text>4. 奖励将在24小时内发放</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { batchAnimate, optimizeScroll, checkAnimationPerformance } from '/static/utils/animation.js'

// 游戏状态
const isScanning = ref(false)
const foundCount = ref(0)
const totalCount = ref(3)

// 宝藏列表
const treasures = ref([
	{
		name: '牛肚',
		icon: '/static/images/games/treasure/tripe.png',
		reward: '满100减20券',
		found: false
	},
	{
		name: '虾滑',
		icon: '/static/images/games/treasure/shrimp.png',
		reward: '满200减50券',
		found: false
	},
	{
		name: '火锅底料',
		icon: '/static/images/games/treasure/soup.png',
		reward: '满300减100券',
		found: false
	}
])

// 附近门店
const nearbyStores = ref([
	{
		name: '川味火锅店',
		address: '北京市朝阳区xxx街xxx号',
		distance: 0.5,
		image: '/static/images/games/treasure/store1.png',
		treasureCount: 2
	},
	{
		name: '重庆火锅店',
		address: '北京市海淀区xxx街xxx号',
		distance: 1.2,
		image: '/static/images/games/treasure/store2.png',
		treasureCount: 1
	}
])

// 开始扫描
const startScan = () => {
	isScanning.value = true
	// 模拟扫描过程
	setTimeout(() => {
		isScanning.value = false
		// 模拟发现宝藏
		const unfoundTreasures = treasures.value.filter(t => !t.found)
		if (unfoundTreasures.length > 0) {
			unfoundTreasures[0].found = true
			foundCount.value++
			
			// 显示奖励
			uni.showModal({
				title: '发现宝藏！',
				content: `恭喜获得${unfoundTreasures[0].reward}`,
				showCancel: false
			})
		}
	}, 3000)
}

// 跳转到门店
const navigateToStore = (store) => {
	uni.navigateTo({
		url: `/pages/store/detail?id=${store.id}`
	})
}

// 页面加载时优化动画性能
onMounted(() => {
	// 优化滚动性能
	optimizeScroll(document.querySelector('.container'))
	
	// 批量处理动画
	const elements = document.querySelectorAll('.fade-in')
	batchAnimate(elements, 'fade-in', 100)
	
	// 检测动画性能
	checkAnimationPerformance()
})
</script>

<style>
@import '/static/styles/animations.css';

.container {
	padding: 20rpx;
	background-color: #F5F5F5;
	min-height: 100vh;
	transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
}

.header {
	padding: 40rpx 20rpx;
	text-align: center;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 24rpx;
	color: #666;
}

.ar-container {
	height: 600rpx;
	background-color: #000;
	border-radius: 12rpx;
	margin: 20rpx;
	overflow: hidden;
	position: relative;
}

.ar-view {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ar-guide {
	width: 400rpx;
	height: 400rpx;
	margin-bottom: 30rpx;
}

.scan-tip {
	font-size: 28rpx;
	color: #FFFFFF;
	margin-bottom: 30rpx;
}

.scan-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 40rpx;
	font-size: 28rpx;
}

.scanning-view {
	height: 100%;
	position: relative;
}

.scan-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400rpx;
	height: 400rpx;
	border: 4rpx solid #D02B29;
	border-radius: 12rpx;
}

.scan-line {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400rpx;
	height: 4rpx;
	background-color: #D02B29;
	animation: scan 2s linear infinite;
}

@keyframes scan {
	0% {
		transform: translate(-50%, -50%) translateY(-200rpx);
	}
	100% {
		transform: translate(-50%, -50%) translateY(200rpx);
	}
}

.scanning-tip {
	position: absolute;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	font-size: 28rpx;
	color: #FFFFFF;
}

.treasure-list {
	padding: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.treasure-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.treasure-item {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
	text-align: center;
	position: relative;
}

.treasure-item.found {
	background-color: #FFE4E4;
}

.treasure-icon {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 10rpx;
}

.treasure-name {
	font-size: 24rpx;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.treasure-reward {
	font-size: 20rpx;
	color: #D02B29;
}

.treasure-status {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	background-color: #D02B29;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.status-text {
	font-size: 20rpx;
	color: #FFFFFF;
}

.nearby-stores {
	padding: 20rpx;
}

.store-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.store-item {
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
}

.store-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.store-info {
	flex: 1;
}

.store-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
	display: block;
}

.store-address {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 8rpx;
	display: block;
}

.store-distance {
	font-size: 24rpx;
	color: #999;
}

.store-treasures {
	background-color: #FFE4E4;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.treasure-count {
	font-size: 24rpx;
	color: #D02B29;
}

.rules {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin: 20rpx;
}

.rules-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.rules-content {
	font-size: 26rpx;
	color: #666;
	line-height: 1.8;
}

.rules-content text {
	display: block;
}
</style> 